import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; 
 

class FormPage extends StatefulWidget {
  FormPage({Key key}) : super(key: key);

  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  var _userName = new TextEditingController(); //初始化给表单赋值 ，如不需要并不用这样写
  var checkboxflag = true;
  var radioValue = 0;
  bool switchValue = true;
  @override
  void initState(){
    super.initState();
    _userName.text = '初始值';
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FormPage'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(
              // obscureText: true, //变成密码框
              // maxLength: 4,      //最大字符
              // maxLines: 4,       //变成多行输入框
              decoration: InputDecoration(
                hintText: "请输入内容",
                // border: OutlineInputBorder(), //边框
                // labelText: "label",           //右上角label
                // icon: Icon(Icons.people)      //icon
              ),
              // controller: _userName,  //初始化设置值
              controller : TextEditingController.fromValue(TextEditingValue(
                  // 设置内容
                  text: _userName.text,
                  // 保持光标在最后
                  selection: TextSelection.fromPosition(TextPosition(affinity: TextAffinity.downstream,offset: _userName.text.length)))),
              onChanged:(value){      //监听
                _userName.text = value;
              },
            ),
            TextField(
              // obscureText: true, //变成密码框
              maxLength: 100,      //最大字符
              maxLines: 2,       //变成多行输入框
              controller : TextEditingController.fromValue(TextEditingValue(
                  // 设置内容
                  text: _userName.text,
                  // 保持光标在最后
                  selection: TextSelection.fromPosition(TextPosition(affinity: TextAffinity.downstream,offset: _userName.text.length)))),  //初始化设置值
              onChanged:(value){      //监听
                _userName.text = value;
              },
            ),
            TextField(
              obscureText: true, //变成密码框
              decoration: InputDecoration(
                labelText: "password",           //右上角label
                icon: Icon(Icons.lock)      //icon
              ),
              controller : TextEditingController.fromValue(TextEditingValue(
                  // 设置内容
                  text: _userName.text,
                  // 保持光标在最后
                  selection: TextSelection.fromPosition(TextPosition(affinity: TextAffinity.downstream,offset: _userName.text.length)))),  //初始化设置值
              onChanged:(value){      //监听
                _userName.text = value;
              },
            ),
            SizedBox(height: 10,),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Checkbox(
                      value: this.checkboxflag,
                      onChanged: (v){
                        setState(() {
                          this.checkboxflag = v;
                        });
                      },
                    ),
                    Text(this.checkboxflag ? '选中${_userName.text.length}' : '未选中${_userName.text.length}'),
                    SizedBox(width: 10,)
                  ],
                ),
                Divider(),
                CheckboxListTile(
                  value: this.checkboxflag,
                    onChanged: (v){
                      setState(() {
                        this.checkboxflag=v;
                      });
                    },
                    title: Text("标题"),
                    subtitle:Text("这是二级标题") ,
                    secondary:Icon(Icons.help)
                ), 
                Divider(),
                Row(
                  children: <Widget>[
                    Text("boy:"),
                    Radio(
                      value: 1,
                      onChanged: (v){
                        setState(() {
                          this.radioValue = v;
                        });
                      },
                      groupValue: this.radioValue,
                    ),
                    SizedBox(width: 10,),
                    Text("girl:"),
                    Radio(
                      value: 2,
                      onChanged: (v){
                        setState(() {
                          this.radioValue = v;
                        });
                      },
                      groupValue: this.radioValue,
                    ),
                    SizedBox(width: 10,),
                    Text("选中:${this.radioValue == 1 ? '男' : '女'}"), 
                  ],
                ),
                Divider(),
                RadioListTile( 
                  value: 4,
                  onChanged: (v){
                    setState(() {
                      this.radioValue = v;
                    });
                  },
                  groupValue: this.radioValue,
                  title: Text("标题"),
                  subtitle:Text("这是二级标题") ,
                  secondary:Icon(Icons.help),
                  selected:this.radioValue == 4,
                ),
                RadioListTile(
                  value: 5,
                  onChanged: (v){
                    setState(() {
                      this.radioValue = v;
                    });
                  },
                  groupValue: this.radioValue,
                  title: Text("标题"),
                  subtitle:Text("这是二级标题") ,
                  secondary:Image.network("https://www.itying.com/images/flutter/2.png"),
                  selected:this.radioValue == 5,
                ),
                Divider(),
                Switch(
                  value:this.switchValue,
                  onChanged: (v){
                    setState(() {
                      this.switchValue = v;
                    });
                  },
                )
              ],
            ),
            Container(
              width: double.infinity,
              child: RaisedButton(
                child: Text("get form value"),
                onPressed: (){
                    print("name: ${_userName.text} checkbox: ${this.checkboxflag} radio: ${this.radioValue} switch ${this.switchValue}"); 
                },
                color: Colors.blue,
                textColor: Colors.white,
              ),
            ),
            
            
          ],
        ),
      ),
    );
  }
}